<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web前端防抖</title>
</head>
<body>

<p>函数防抖是某一段时间内只执行一次，那么在设定时间内持续交互，这个设定事件被会重置，导致函数只执行一次</p>

<p>没防抖输入</p>
<input id="input1" />

<hr>
<p>防抖输入</p>
<input id="input2" />

</body>
<script>

    let count =0
    let input1 =  document.getElementById('input1')
    let result1 =   document.getElementById('result1')
    input1.addEventListener('keyup',function(){
            count++
            console.log(count)
    })



    let result2 =   document.getElementById('result2')
    let input2 =  document.getElementById('input2')
    input2.addEventListener('keyup',function(){
        clearTimeout(this.timer)
        this.timer = setTimeout(function(){
            count++
            console.log(count)
        },1000)

    })


</script>
<script>
    /**
     * 防抖（debounce）
     1.1 什么是防抖
     在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。
     函数防抖是某一段时间内只执行一次

     1.2 应用场景
     (1) 用户在输入框中连续输入一串字符后，
     只会在输入完后去执行最后一次的查询ajax请求，
     这样可以有效减少请求次数，节约请求资源；

     (2) window的resize、scroll事件，
     不断地调整浏览器的窗口大小、
     或者滚动时会触发对应事件，
     防抖让其只触发一次；


     */
</script>
</html>